import { ref } from 'vue'
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
/**
 * 封装数据懒加载重复代码
 * return { list, target }
*/
export const useObserver = (apiFn) => {
  const list = ref([])
  // 通过 ref 获得组件实例
  const target = ref(null)
  // target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
  const { stop } = useIntersectionObserver(
    target,
    // isIntersecting 是否进入可视区域，true是进入 false是移出
    // 在此处可根据isIntersecting来判断，然后做业务
    ([{ isIntersecting }], observerElement) => {
      console.log(39, isIntersecting, observerElement)
      if (isIntersecting) {
        stop()
        apiFn().then(({ result }) => {
          list.value = result
        })
      }
    }
  )
  return { list, target }
}

/**
 * 倒计时器封装
 * return { countTime(时间), start(开启计时器) }
*/
export const useCountDown = (startCount) => {
  const countTime = ref(0)
  // pause 暂停定时器
  const { pause, resume } = useIntervalFn(() => {
    if (countTime.value <= 0) {
      pause()
      return
    }
    // 倒计时，就是每隔一秒减一
    countTime.value--
  }, 1000)
  // 重新开始（倒计时的数字）
  function start () {
    if (countTime.value > 0) return
    countTime.value = startCount
    resume()
  }
  return {
    countTime,
    start,
    pause,
    resume
  }
}
